<!DOCTYPE html>
<html lang="zh-CN">

<head>
    {% include 'header_content',hide_favicon:true %}
	{{  'public.js' | public_assets_content  }}
	<link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_url }}">

    <style type="text/css">

		#module_freedomain_login{
			display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 100vh;
		    text-align: center;
				width:530px;
				margin: 0 auto;
		}
		.module_freedomain_login_wrapper{
			width: 100%;
		}
		#module_freedomain_login .logo{
			margin-bottom: 60px;
			font-size: 0;

		}
    	#module_freedomain_login .logo a{
		    font-size: var(--title_font_size);
		    color: var(--title_color);
		    font-family: var(--title_font_family);
		    font-style: var(--title_font_style);
		    font-weight: var(--title_font_weigth);
		    letter-spacing: var(--title_letter_spacing);
				line-height: 1;
				display: inline-flex;
				align-items: center;
		}
		#module_freedomain_login .logo span{
			font-weight: bold;
		}
		#module_freedomain_login .logo img{
		    max-height: 60px;
		    max-width: 300px;
		}
		#module_freedomain_login .logo img.favicon{
			width: 36px;
			height: 36px;
			margin-right: 16px;
		}
		#module_freedomain_login .logo .logo-block{
				height: 36px;
		    width: 36px;
				font-size:18px;
				line-height:36px;
				text-align:center;
				margin-right:16px;
				background: #242F48;
				border-radius: 4px;
				color: rgba(255, 255, 255, 0.7);

		}
		#module_freedomain_login .module_freedomain_login_header{
			margin-bottom: 40px;

		}
		#module_freedomain_login .module_freedomain_login_title{
			font-size: 24px;
			line-height: 1.3;
			color: var(--title_color);
		}
		#module_freedomain_login .module_freedomain_login_detail{
			margin-top: 20px;
		}
		#module_freedomain_login .mo-form{
			display: flex;
			width: 100%;
		}
		#module_freedomain_login .mo-form-input{
			height: 48px;
		}
		#module_freedomain_login .mo-form .form_btn{
			min-width: 120px;
			margin-left: 10px;
		}
		@media screen and (max-width: 767px){
			#module_freedomain_login{
				width: 100%;
				padding: 0 15px;
				box-sizing: border-box;
			}
			#module_freedomain_login .mo-form{
				display: inline;
			}
			#module_freedomain_login .mo-form .form_btn{
			width: 100%;
			margin-left: 0;

			}
			#module_freedomain_login .module_freedomain_login_title{
				font-size: 18px;
			}
			#module_freedomain_login .logo{
				margin-bottom: 40px;
			}
		}

		 .domain_err{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .domain_err .domain_err_wapper{
            text-align: center;
            padding: 0 20px;
        }
        .domain_err .domain_err_wapper .domain_err_svg{}
        .domain_err .domain_err_wapper .domain_err_svg svg{
            width: 65px;
            height65px;
            fill: #ff0000;
        }
        .domain_err .domain_err_wapper .domain_err_title{
            margin: 20px 0 30px;
        }
        .domain_err .domain_err_wapper p{
            line-height: 24px;
        }
        .domain_err .domain_err_wapper .TestingDomainConfirm{
            margin-top: 40px;
            width: 240px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #333;
            border: none;
        }
    </style>
</head>

<body>
    <div class="module_freedomain_login_default" id="module_freedomain_login">
		<div class="module_freedomain_login_wrapper">
			<div class="logo">
				<a >
					{% assign name_size = storeConfig.name.size %}
					{%- if name_size > 3 -%}
						<span class="shop_name">{{ storeConfig.name | slice: 0,1}}***{{ storeConfig.name | slice: -1, name_size}}</span>
					{%- else -%}
						<span class="shop_name">{{ storeConfig.name | slice: 0,1}}***</span>
					{%- endif -%}
				</a>
			</div>
			<div class="module_freedomain_login_header">
				<div class="module_freedomain_login_title">{{lang.general.store_password}}</div>
				<div class="module_freedomain_login_detail">{{ value }}</div>
			</div>
			<div class="mo-form" id="login-form">
				<div class="mo-form-item" name="access_password" style="flex:1">
					<div class="mo-form-item-value">
						<input class="mo-form-input" type="text"  name="password" placeholder="{{lang.customers.login.rule_password_placeholder}}">
					</div>
				</div>
				<div class="mo-form-item">
					<div class="mo-form-item-value">
						<div class="main_btn form_btn" id="confirm">{{lang.customers.login.confirm}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    

    <script type="text/javascript">
    (function () {
    	const rules = {};
        const form = moi.form("#login-form",rules);
				const passwordNode = $(".mo-form-input[name='password']");

				function submit(){
						if (passwordNode.val()) {
							const load = moi.nodeShowLoading(this);
							const params = moi.paramsValueString(form.allValue());
							moi.ajax({
								url: "/module/freedomainlogin",
								type: "post",
								data: JSON.stringify(params),
								complete: function () {
									load.close();
								},
								success: function (data) {
									if (data.data.data) {
										window.location.reload()
									} else {
										moi.tooltip({
											placement: "top",
											el: passwordNode,
											timer: 2000,
											space: 0,
											content: "{{lang.general.password_error}}"
										})
									}
								}
							});
						} else {
							moi.tooltip({
								placement: "top",
								el: passwordNode,
								timer: 2000,
								space: 0,
								content: "{{lang.customers.login.rule_password_placeholder}}"
							})
						}
				}

				passwordNode.on('keypress',function(event){
					if(event.keyCode == "13") {
					submit()
					}
				})
        $("#confirm").click(function () {
					submit()
				});
    })();
	</script>

</body>

</html>

